<template>
  <div class="navigatorContainer">
    <div class="item">
      <el-tooltip
        effect="light"
        :content="$t('message.xmindMap.returnRoot')"
        placement="top"
      >
        <div class="btn xmind-iconfont icondingwei" @click="backToRoot"></div>
      </el-tooltip>
    </div>
    <div class="item" v-if="!isRead">
      <MouseAction :mindMap="mindMap"></MouseAction>
    </div>
    <div class="item">
      <el-tooltip
        effect="light"
        :content="
          openMiniMap
            ? $t('message.xmindMap.closeMiniMap')
            : $t('message.xmindMap.openMiniMap')
        "
        placement="top"
      >
        <div class="btn xmind-iconfont icondaohang1" @click="toggleMiniMap"></div>
      </el-tooltip>
    </div>
    <!-- <div class="item">
      <el-switch
        v-model="isReadonly"
        active-text="只读模式"
        inactive-text="编辑模式"
        @change="readonlyChange"
      >
      </el-switch>
    </div> -->
    <div class="item">
      <Fullscreen :mindMap="mindMap" :isRead="isRead"></Fullscreen>
    </div>
    <div class="item">
      <Scale ref="scale" :mindMap="mindMap"></Scale>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();
import Scale from "./Scale.vue";
import Fullscreen from "./Fullscreen.vue";
import MouseAction from './MouseAction.vue'
const emit = defineEmits([""])
const props = defineProps({
  mindMap: {
    type: Object,
  },
  isRead:{
    type:Boolean,
    default:false
  }
})
const scale = ref()
const isReadonly = ref(false)
const openMiniMap = ref(false) 
function readonlyChange(value) {
  props.mindMap.setMode(value ? 'readonly' : 'edit')
}
function setScale(val){
  scale.value.setScale(val)
}
function toggleMiniMap() {
  openMiniMap.value = !openMiniMap.value
  proxy.$eventBus.$emit('toggle_mini_map', openMiniMap.value)
}
function backToRoot() {
  props.mindMap.renderer.setRootNodeCenter()
}
</script>
<style lang="scss" scoped>
.navigatorContainer {
  @include fontFamily;
  padding: 0 12px;
  // position: fixed;
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: hsla(0, 0%, 100%, 0.8);
  border-radius: 5px;
  opacity: 0.8;
  height: 44px;
  font-size: 12px;
  display: flex;
  align-items: center;

  .item {
    margin-right: 20px;
    .btn{
      padding: 0px !important;
    }
    &:last-of-type {
      margin-right: 0;
    }
  }
}
</style>
